<template>

<div id="main" :style="{width: '1400px', height: '400px'}" >

</div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  mounted() {
    this.myEcharts()
  },
  created () {
    
  },
  methods: {
    myEcharts () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'))

      var option = {
        title: {
          text: '个人能力图'
        },
        tooltip: {},
        legend: {
            data: ['能力（Actual Spending）']
        },
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: [
                { name: '品德（Character）', max: 6500},
                { name: '智力（Intelligence）', max: 16000},
                { name: '体能（Physical Fitness）', max: 30000},
                { name: '美德（Virtue）', max: 38000},
                { name: '劳动（Labor）', max: 52000},
                { name: '成绩（Grade）', max: 25000}
            ]
        },
        series: [{
            name: '能力（Ability）',
            type: 'radar',
            // areaStyle: {normal: {}},
            data: [
                {
                    value: [5000, 14000, 28000, 31000, 42000, 21000],
                    name: '能力（Actual Spending）'
                }
            ]
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
  },

}

</script>
<style>
</style>